<template>
	<div v-if="easyFlowVisible" style="height: calc(100vh);">
		<div style="display: flex;height: calc(100% - 47px);">
			<div id="efContainer" ref="efContainer" class="container" v-flowDrag :style="{'background-image': `url(img/designer-bg.png)`}">
				<div style="text-align: center;font-weight: 600;font-size: 20px;margin: 15px;color: #409eff;">{{ data.name }}<span style="margin-left: 10px;">预览</span></div>
				<flow-node
					v-for="node in data.nodeList" :key="node.id"
					:id="node.id"
					:node="node"
					:activeElement="activeElement"
					@clickNode="clickNode"
				>
				</flow-node>
				<!-- 给画布一个默认的宽度和高度 -->
			</div>
		</div>
	</div>

</template>

<script>
import {cyFlowMixin} from './mixins'
import flowNode from './node'
import lodash from 'lodash'
import jsPlumbTools from 'jsplumb'

let jsPlumb = jsPlumbTools.jsPlumb;
export default {
	data() {
		return {
			isShow: false,
			// 控制画布销毁
			easyFlowVisible: true,
			// 控制流程数据显示与隐藏
			flowInfoVisible: false,
			// 是否加载完毕标志位
			loadEasyFlowFinish: false,
			// 数据
			data: {},
			// 激活的元素、可能是节点、可能是连线
			activeElement: {
				// 可选值 node 、line
				type: undefined,
				// 节点ID
				nodeId: undefined,
				// 连线ID
				name: "",
				sourceId: undefined,
				targetId: undefined
			},
			zoom: 1,
			flowId: this.$route.query.flowId
		}
	},
	// 一些基础配置移动该文件中
	mixins: [cyFlowMixin],
	components: {
		flowNode
	},
	directives: {
		'flowDrag': {
			bind(el, binding) {
				if (!binding) {
					return
				}
			}
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.dataReload()
		})
	},
	methods: {
		jsPlumbInit() {
			jsPlumb.ready(() => {
				// 导入默认配置
				jsPlumb.importDefaults(this.previewSetting)
				// 会使整个jsPlumb立即重绘。
				jsPlumb.setSuspendDrawing(false, true);
				// 初始化节点
				this.loadEasyFlow()
				// 连线
				jsPlumb.bind("connection", (evt) => {
					let from = evt.source.id
					let to = evt.target.id
					if (this.loadEasyFlowFinish) {
						this.data.lineList.push({from: from, to: to})
					}
				})
				jsPlumb.setContainer(this.$refs.efContainer)
			})
		},
		// 加载流程图
		loadEasyFlow() {
			// 初始化节点
			for (var i = 0; i < this.data.nodeList.length; i++) {
				let node = this.data.nodeList[i]
				// 设置源点，可以拖出线连接其他节点
				jsPlumb.makeSource(node.id, lodash.merge(this.jsplumbSourceOptions, {}))
				// // 设置目标点，其他源点拖出的线可以连接该节点
				jsPlumb.makeTarget(node.id, this.jsplumbTargetOptions)
			}
			// 初始化连线
			for (var s = 0; s < this.data.lineList.length; s++) {
				let line = this.data.lineList[s]
				var connParam = {
					source: line.from,
					target: line.to,
					label: line.label ? line.label : '',
					condition: line.condition ? line.condition : '',
					conditionItem: line.conditionItem ? line.conditionItem : [],
					connector: line.connector ? line.connector : '',
					anchors: line.anchors ? line.anchors : undefined,
					paintStyle: line.paintStyle ? line.paintStyle : undefined,
				}
				jsPlumb.connect(connParam, this.jsplumbConnectOptions)
			}
			this.$nextTick(function () {
				this.loadEasyFlowFinish = true
			})
		},
		clickNode(nodeId, name, type) {
			this.isShow = true;
			this.activeElement.type = 'node'
			this.activeElement.nodeId = nodeId
			this.activeElement.name = name
		},
		// 是否具有该线
		hasLine(from, to) {
			for (var i = 0; i < this.data.lineList.length; i++) {
				var line = this.data.lineList[i]
				if (line.from === from && line.to === to) {
					return true
				}
			}
			return false
		},
		repaintEverything() {
			jsPlumb.repaint()
		},
		// 加载流程图
		dataReload() {
			this.easyFlowVisible = false
			this.$nextTick(async () => {
				var res = await this.$API.bpm.bpmStep.getBpmStepConfigByFlowId.get({flowId: this.flowId});
				if (res.code == 200) {
					this.easyFlowVisible = true
					this.data = res.data;
					jsPlumb = jsPlumbTools.jsPlumb.getInstance();
					this.$nextTick(() => {
						this.jsPlumbInit()
					})
				} else {
					this.$alert(res.message, "提示", {type: 'error'})
				}
			})
		},
	}
}
</script>
<style scoped>
@import './index.css';
</style>
